import React, { useEffect, useState } from 'react';
import Header from '../../../../component/Serve/Header/Header'
import { useNavigate, useLocation } from 'react-router-dom'
import { Button, Form, Input, Select, DatePicker, Col, message } from 'antd';
import { addServerList, optionlist,getPackName, teamlist, findStatusName, getResidentList ,getServerPro,getDoctorList} from '../../../../api/Service'
import './serveEdit.scss';
import { useSelector } from 'react-redux';
interface Props {

}
function ServeEdit(props: Props) {
    const [messageApi, contextHolder] = message.useMessage();
    var navigate = useNavigate()
    var location = useLocation()
    const [form] = Form.useForm()
    const { TextArea } = Input;
    //下拉框数据
    var [organName, setOrganName] = useState([])
    var [packName, setPackName] = useState([])
    var [statusName, setStatusName] = useState([])
    var [dteamName, setDteamName] = useState([])
    var [project, setProject] = useState([])
    //所有居民数据
    var [allResidentList, setAllResidentList] = useState([])
    //选择居民下拉框数据
    var [checkedUser,setCheckedUser] = useState([])
    //下拉选中居民后该居民信息
    var [userInfo,setUserInfo] = useState<any>([])
    //医生列表
    var [doctor,setDoctor] = useState([])
    //从居民跳转过来之后获取居民信息,并回显
    var user = useSelector((state:any)=>{return state.WTreducer})
    //挂载期
    useEffect(() => {
        getName();
        getResiList();//获取所有居民数据
    }, [])
    //合并数据函数
    var setList = (arr: any) => {
        var newarr = arr.map((item: any) => { return { ...item[0], ...item[1] } })
        return newarr
    }
    //获取所有居民数据
    var getResiList = async () => {
        var res = await getResidentList();
        setAllResidentList(res.data.data)
        //筛选居民下拉列表
        var checkedList = res.data.data.map((item:any)=>{
            return {value:item.residentId,label:item.residentName}
        })
        setCheckedUser(checkedList)
    }
    //选择居民下拉框选中后获取该居民信息
    var changedUser = (value:any)=>{
        var info = allResidentList.filter((item:any)=>{
            return item.residentId==value
        })
        setUserInfo(info)
        form.setFieldsValue(info[0])
    }
    //表单验证通过提交
    const onFinish = async (values: any) => {
        console.log(values);
        values.serviceAppointment = values.serviceAppointment.format('YYYY-MM-DD');
        var { residentId, ...addUser } = values
        // var res = await addServerList({ ...addUser, "residentId":userInfo[0].residentId, "serviceSubmit": getlocalTime()})
        var res = await addServerList({ ...addUser, "residentId":userInfo[0].residentId,})
        if (res.data.code == 200) {
            messageApi.open({
                type: 'success',
                content: '添加成功',
            });
            setTimeout(() => {
                navigate(-1)
            }, 1000)
        }
    };
    //获取本地时间
    var getlocalTime = ()=>{
        var date = new Date()
        var year = date.getFullYear();
        var mounth = date.getMonth()+1;
        var day = date.getDate();
        return year+"-"+mounth+"-"+day
    }
    //获取下拉框数据
    var getName = async () => {
        var res = await optionlist()//机构
        setOrganName(res.data.data.map((item:any)=>{return {value:item.mechanismId,label:item.mechanismName}}))
        var res1 = await teamlist()//医生团队  
        setDteamName(res1.data.data.map((item:any)=>{return {value:item.teamId,label:item.teamName}}))
        var res2 = await getPackName()//服务包
        setPackName(res2.data)
        var res3 = await findStatusName()//状态
        var res4 = res3.data.data.map((item:any)=>{return {value:item.ssId,label:item.ssName}})
        setStatusName(res4)
        var res5 = await getServerPro()//服务项目
        var res6 = setList(res5.data.data)
        if (res.data.code == 200) {
            setProject(res6.map((item: any) => { return { value: item.projectId, label: item.projectName } }))
        }
        var res7 =await getDoctorList()//医生列表
        var res8 = res7.data.data.map((item:any)=>{return {value:item.doctorId,label:item.doctorName}})
        setDoctor(res8)
    }
    return (
        <div className='serveedit'>
            {contextHolder}
            <div className="main">
                <Header txt='新增服务信息'></Header>
                <div className="resident">
                    <h4>居民信息</h4>
                    <div className="inputbox">
                        <Form
                            form={form}
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                            layout="inline"
                        >

                            <Col span={8}>
                                <Form.Item
                                    label="选择居民"
                                    name="residentName"
                                    rules={[{ required: true }]}
                                >
                                    <Select placeholder="请选择" allowClear options={checkedUser} onChange={(value)=>{changedUser(value)}}></Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="身份证号"
                                    name="residentNumber"
                                    rules={[{ required: true }]}
                                >
                                    <Input placeholder='请输入' />
                                </Form.Item>
                            </Col>


                            <Col span={8}>
                                <Form.Item
                                    label="性别"
                                    name="residentGender"
                                    rules={[{ required: true }]}
                                >
                                    <Select placeholder="请选择">
                                        <Select.Option value="男">男</Select.Option>
                                        <Select.Option value="女">女</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="出生年月"
                                    name="residentBirth"
                                >
                                    <Input />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="联系电话"
                                    name="residentPhone"
                                    rules={[{ required: true }]}
                                >
                                    <Input placeholder='请输入' />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="现居地"
                                    name="residentNowAddress"
                                >
                                    <Input placeholder='请输入' />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="居民标签"
                                    name="rtId"
                                >
                                    <Select placeholder="请选择">
                                        <Select.Option value={1}>慢病护理</Select.Option>
                                        <Select.Option value={2}>高血压</Select.Option>
                                        <Select.Option value={3}>高血糖</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={16}></Col>
                        </Form>

                        <Form
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                            layout="inline"
                            onFinish={onFinish}
                        >

                            <Col span={24}><h4>签约信息</h4></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务编号"
                                    name="residentId"
                                >
                                    <Input bordered={false} placeholder="后台自动生成"/>
                                </Form.Item>
                            </Col>


                            <Col span={8}>
                                <Form.Item
                                    label="服务机构"
                                    name="mechanismId"
                                    rules={[{ required: true }]}
                                >
                                    <Select placeholder="请选择" allowClear options={organName}></Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务团队"
                                    name="teamId"
                                    rules={[{ required: true }]}
                                >
                                    <Select placeholder="请选择" allowClear options={dteamName}></Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务医生"
                                    name="doctorId"
                                    rules={[{ required: true }]}
                                >
                                    <Select placeholder="请选择" options={doctor}></Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务包"
                                    name="packageId"
                                    rules={[{ required: true }]}
                                >
                                    <Select placeholder="请选择" allowClear options={packName}></Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务项目"
                                    name="projectId"
                                    rules={[{ required: true }]}
                                >
                                    <Select placeholder="请选择" options={project}>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务地点"
                                    name="servicePlace"
                                    rules={[{ required: true }]}
                                >
                                    <Select placeholder="请选择">
                                        <Select.Option value={1}>上门服务</Select.Option>
                                        <Select.Option value={2}>机构门诊</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务时间"
                                    name="serviceAppointment"
                                    rules={[{ required: true }]}
                                >
                                    <DatePicker format="YYYY-MM-DD" />
                                </Form.Item>
                            </Col>
                            <Col span={24}></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务备注"
                                    name="serviceDesc"
                                >
                                    <TextArea rows={4} />
                                </Form.Item>
                            </Col>

                            <Col span={24}>
                                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                    <Button type="primary" htmlType="submit">保存</Button>
                                    <Button onClick={() => { navigate(-1) }}>返回</Button>
                                </Form.Item>
                            </Col>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ServeEdit;